<!--  -->
<template>
  <div>
    <div class="newDetail">
      <h5>{{NewsdetailList.title}}</h5>
      <p v-if="NewsdetailList.add_time">
        发表时间：{{NewsdetailList.add_time.slice(0, 10)}}
        <span>点击次数：{{NewsdetailList.click}}</span>
      </p>
    </div>
    <div v-html="NewsdetailList.content" class="content"></div>
    <comment :id="$route.params.id"></comment>
  </div>
</template>

<script>
import comment from "../components/Comment.vue";
export default {
  props:['id'],
  data() {
    return {
      NewsdetailList: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getNewsdetail();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async getNewsdetail() {
      const { data: res } = await this.$http.get(`/api/getnew/${this.newsID}`);
      // console.log(res.message);
      this.NewsdetailList = res.message[0];
      // console.log(this.NewsdetailList);
    },
    getTime() {
      return this.NewsdetailList.add_time.slice(0, 10);
    }
  },
  computed: {
    newsID() {
      return this.$route.params.id;
    }
  },
  components: {
    "comment":comment  
  }
};
</script>
<style lang="less" scoped>
.newDetail {
  margin: 10px 10px 0 10px;
  color: #1989fa;
  border-bottom: 1px solid #ccc;
  h5 {
    text-align: center;
    font-size: 14px;
  }
  p {
    line-height: 10px;
    font-size: 12px;
  }
  span {
    float: right;
  }
}
.content {
  padding: 0 10px;
  color: #535353;
}
</style>
